<template>
	<view class="content">
		<!-- //轮播图 -->
		<view id="container">
			<view style="z-index: 0;">
				<view>
					<u-swiper :list="infor.banners"></u-swiper>
				</view>
				<!-- //导航栏 -->
				<view style="margin: 30rpx 10rpx 0 10rpx;">
					<view class="u-demo-block__content">
						<u-row justify="space-between" gutter="10">
							<u-col span="3">
								<view class="demo-layout bg-purple" @click="go_views(item)">
									<image class="img" :src="get_img+'sys/image/hx.png'"></image>
									<strong>户型鉴赏</strong>
								</view>
							</u-col>
							<u-col span="3" @click="go_address">
								<view class="demo-layout bg-purple">
									<image class="img" :src="get_img+'sys/image/dz.png'"></image>地址配置
								</view>
							</u-col>
							<u-col span="3">
								<view class="demo-layout bg-purple" @click="go_detail">
									<image class="img" :src="get_img+'sys/image/xw.png'"></image>详细介绍
								</view>
							</u-col>
							<u-col span="3">
								<view class="demo-layout bg-purple" @click="go_photo">
									<!-- <button open-type="share" class="button"> -->
									<image class="img " :src="get_img+'sys/image/xc.png'">楼盘相册</image>
									<!-- <view class="pp">
											<p>分享有礼</p>
										</view> -->
									<!-- </button> -->
								</view>
							</u-col>

						</u-row>
					</view>
				</view>

				<!-- //分割线 -->
				<view style="padding-top: 30rpx;">
					<u-line color="#8e8e8e"></u-line>
				</view>
				<!-- 第三栏左侧 -->
				<view class="zf1">
					<view style="font-size: 50rpx;">{{infor.name}}</view>
					<view style="font-size: 13px;color: grey;">
						售价：{{infor.price}}元/m<span class="sb">2</span>起
					</view>
					<view>
						<view class="tag" v-for="(item,index) in infor.label" :key="index">
							<u-tag :text="item" plain plainFill> </u-tag>
						</view>
					</view>

				</view>
				<!-- //第三栏右侧 -->
				<view style="padding-top: 10rpx;">
					<view class="zr">
						<view class="u-demo-block__content">
							<u-row justify="space-between" customStyle="margin-bottom: 10px">
								<u-col span="5">
									<view class="demo-layout zr_1" @click="call_custom">
										<view>
											<image class="icon" :src="get_img+'sys/image/dh.png'"></image>
										</view>
										<view style="margin-top: 5rpx;">电话咨询</view>
									</view>
								</u-col>
								<u-col span="6">
									<view class="demo-layout zr_2" @click="chat">
										<view>
											<image class="icon" :src="get_img+'sys/image/ll.png'"></image>
										</view>
										<view style="margin-top: 5rpx;">在线聊聊</view>
									</view>
								</u-col>
							</u-row>

							<u-row>
								<u-col span="11">
									<view class="demo-layout zr_3" @click="nav('/pages/booking/booking')">
										<view style="float: left;">
											<image class="icon1" :src="get_img+'sys/image/yy.png'"></image>
										</view>
										<view style="float: right;padding-right: 20px;padding-top: 10px;">预约留电</view>
									</view>
								</u-col>
							</u-row>
						</view>
					</view>
					<!-- 广告横幅栏1 -->
					<view v-if="infor.advertisement">
						<image @click="vr()" style="height: 70px;width: 750rpx;" :src="get_img+infor.advertisement"></image>
					</view>
				</view>
        
				<!-- 户型鉴赏栏1 -->
				<view id="views">
					<view>
						<view class="hx1">户型鉴赏</view>
					</view>
					<!-- //分割线 -->
					<view style="padding-top: 15px;">
						<u-line color="#8e8e8e"></u-line>
					</view>
					<!-- 户型图片 -->
					<view style="height: 120px;">
						<view style="margin: 10px 15px 10px 10px;">
							<view class="u-demo-block__content" style="overflow-x: auto;height: 300rpx;">
								<u-row justify="start" gutter="3">
									<u-col span="4" v-for="(item,index) in infor.house_types" :key="index">
										<view class="demo-layout hx3" @click="go_hxxq(item)">
											<image class="hx3" :src="get_img+item.image"></image>
											{{item.name}}{{item.area}}m<span class="sb1">2</span>
										</view>
									</u-col>
								</u-row>
							</view>
						</view>
					</view>
				</view>

				<!-- 位置 -->
				<view style="height: 70rpx;">
					<view class="wz2">地址：{{infor.address}}</view>
					<view class="wz1" @click="go_address">
						<image :src="get_img+'sys/image/fx.png'" style="height: 14px;width: 14px;"></image>位置
					</view>
				</view>

				<view style="width: 750rpx;">
					<view class="cs" @click="sync">

						<image class="img2" :src="get_img+sys.project_param_bg">
							<p class="p2">楼盘参数</p>
						</image>
					</view>
					<view class="xq" @click="particular">
						<image class="img3" :src="get_img+sys.project_detail_bg">
							<p class="p1">楼盘详情</p>
						</image>
					</view>
				</view>

				<!-- VR全景图入口 -->
				<!-- <view style="margin-top: 180rpx;" v-if="infor.advertisement">
					<image @click="clickImg(infor.advertisement)" style="height: 70px;width: 750rpx;" :src="get_img+infor.advertisement"></image>
				</view> -->
				<view style="font-weight: bold;" id="photo">
					<view style="margin: 10rpx 0 15rpx 30rpx;">楼盘相册</view>

					<u-line color="#8e8e8e"></u-line>
				</view>
				<view>
					<view class="l" v-for="(item,index) in infor.album" :key="index">
						<image class="img1" :src="get_img+item.image[0]">
							<view class="p3" @click="go_album(item)">
								<p class="p4">{{item.name}}</p>
							</view>
						</image>
					</view>
				</view>
				<view>
					<image class="logo" :src="get_img+'sys/icon/logo.png'"></image>
			</view>
				<!-- 按钮 -->
				<view style="width: 200rpx;height: 80rpx;padding-left: 40%;" @click="call_custom">
					<button style="color: #fff;">联系我们 </button>
				</view>
			</view>
			<view v-if="show" class="js">
				<image class="js" :src="get_img+'sys/icon/ly3.png'"></image>
				<view style="background-color:rgba(255, 255, 255, .6);border-radius: 5rpx; margin: 70rpx 0 0 50rpx;z-index: 2;position: fixed; font-size: 30rpx;">
					<u-count-down @finish="finish" :time=" sys.through_time * 1000" format="mm:ss"></u-count-down>

				</view>


			</view>
			<view class="dz">
				<view style="width: 100rpx;padding: 10rpx 0 0 10rpx;" @click="collect">
					<view style="">
						<u-icon :name="infor.collect!=null?'heart-fill':'heart'" color="#fff" size="70rpx"></u-icon>
						<!-- <p style="width: 100rpx;">{{infor.collect!=null?"取消收藏":"收&nbsp;藏"}}</p> -->
					</view>
				</view>
			</view>

			<view class="fx">
				<view style=" padding: 10rpx 0 0 0;text-align: center; font-size: 32rpx;color:#fff">
					<button type="primary" open-type="share" style="background-color: rgb(85 0 0 / 0%);width: 300rpx;height: 70rpx;">
					</button>
					<view style="float: left;margin:-70rpx 0 0 10rpx; width: 90rpx;z-index: -1;position: fixed;">
						<u-icon name="share-square" color="#fff" size="70rpx"></u-icon>
					</view>
					<!-- <p>分&nbsp;享</p> -->

				</view>
			</view>
			<view style="height: 110rpx;"></view>
			<BtNav :adviser="custom"></BtNav>
		</view>
	</view>
</template>

<script>
	var _self
	import BtNav from '@/components/bottom_nav/bottom_nav.vue'
	export default {
		components: {
			BtNav
		},
		data() {
			return {
				disabled: true,
				get_img: this.$get_img,
				id: "",
				infor: {},
				custom: {},
				show: false,
				sys: {},
				album: [],
				type: "chick",
				tips: {
					chick: "已获得饲料x1,请返回喂鸡",
					draw: "已获得抽奖机会x1,请返回抽奖",
					tree: "已获得浇水次数x1,请返回浇水"
				},
				list: []
			}
		},
		onLoad(option) {
			this.sys = uni.getStorageSync("sys")
			_self = this
			if (option.id) {
				this.id = option.id
				this.get_data(option.id)
			} else {
				uni.navigateBack()
			}

			if (option.type) {
				this.type = option.type
			}

			this.get_custom()
			this.get_show()
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
			}
			let sys = uni.getStorageSync("sys")
			return {
				title: sys.share_title,
				path: '/pages/index/index?id=' + this.id + "&type=share",
				success(res) {
					console.log("分享成功")
				}
			}
		},
		methods: {
			showToast(params) {
				this.$refs.uToast.show({
					...params,
					complete() {
						params.url && uni.navigateTo({
							url: params.url
						})
					}
				})
			},
			get_custom() {
				this.$model.get("user/common/get_adviser").then(res => {
					_self.custom = res.data
					uni.setStorageSync("hxxq_custom", res.data)
				})
			},
			go_hxxq(item) {
				uni.setStorageSync("hxxq_infor", this.infor)
				uni.setStorageSync("hxxq_choose", item)
				uni.setStorageSync("hxxq_choose1", item.banners)
				uni.navigateTo({
					url: '../hxxq/hxxq'
				})
			},
			go_views(item) {
				if (this.infor.house_types.length != 0) {
					uni.setStorageSync("hxxq_infor", this.infor)
					uni.setStorageSync("hxxq_choose", this.infor.house_types[0])
					// uni.setStorageSync("hxxq_custom", this.custom)
					uni.navigateTo({
						url: '../hxxq/hxxq'
					})
				}
			},
			get_show() {
				let that = this
				this.$model.get("user/common/get_show").then(res => {
					that.show = res.data.data
				})
			},
			finish() {
				let that = this
				this.show = false
				uni.showModal({
					title: this.tips[this.type]
				})
				this.$model.get("user/common/add_house_through?type=" + this.type).then(res => {
					that.get_infor()
				})
			},
			get_infor() {
				let that = this
				this.$model.get("user/get_infor").then(res => {
					if (res.code == 200) {
						uni.setStorageSync("infor", res.data)
						that.user = res.data
					}
				})
			},
			go_photo() {
				uni.createSelectorQuery()
					.select("#container") //对应外层节点
					.boundingClientRect((container) => {
						uni.createSelectorQuery()
							.select("#photo") //目标节点
							.boundingClientRect((target) => {
								uni.pageScrollTo({
									scrollTop: target.top - container.top, //滚动到实际距离是元素距离顶部的距离减去最外层盒子的滚动距离
								});
							})
							.exec();
					})
					.exec();
			},
			go_detail() {

				uni.navigateTo({
					url: '/pages/house/data'
				})
			},

			get_data(id) {
				let that = this
				this.$model.get("user/project/get_project_id?id=" + id).then(res => {
					if (res.code == 200) {
						that.infor = res.data
						that.album = that.infor.album
						for (let i = 0; i < that.infor.banners.length; i++) {
							that.infor.banners[i] = that.get_img + that.infor.banners[i]
						}
						uni.setStorageSync("custom_data", that.infor.custom_data)
						uni.setStorageSync("infor1", that.infor.content)
						uni.setStorageSync("infor2", that.infor.sale_infor)
					}
				})
			},
			collect() {
				let state = 1
				if (this.infor.collect) {
					state = 0
				}
				let data = {
					house_id: this.infor.id,
					state: state
				}
				let that = this
				this.$model.post("user/common/collect_house", data).then(res => {
					that.get_data(that.id)
				})
			},
			chat() {
				uni.navigateTo({
					url: "../chat/chat?id=" + this.custom.uid
				})
			},
			call_custom() {
				console.log("call_custom:", this.custom)
				uni.makePhoneCall({
					phoneNumber: this.custom.phone
				})
			},
			go_address() {
				uni.openLocation({
					latitude: this.infor.position[1],
					longitude: this.infor.position[0],
					name: this.infor.address,
					success: function() {
						console.log('success')
					}
				})
			},
      // 点击广告图进入
      vr() {
        uni.navigateTo({
        	url: '/pages/index/web?url=' + this.infor.vr_address
        })
      },
			goCustom() {
				uni.navigateTo({
					url: '../chat/chat?id=' + this.custom.uid
				})
			},
			particular() {
				uni.setStorageSync("hxxq_custom", this.custom)
				uni.setStorageSync("infor1", this.infor.content)
				uni.navigateTo({
					url: '/pages/house/data'
				})
				// uni.setStorageSync("hxxq_custom", this.custom)
				//  uni.setStorageSync("infor1", that.infor.content)
			},
			sync() {
				uni.navigateTo({
					url: '../details/details'
				})
			},
			go_album(item) {
				uni.setStorageSync("album", item)
				uni.navigateTo({
					url: '/pages/house/album'
				})
			}
		}
  
	}
</script>

<style lang="scss">
	.content {
		margin-bottom: 110rpx;
	}

	.wrap {
		padding: 12px;
	}

	.tag {
		float: left;
		margin: 5rpx;
	}

	.demo-layout {
		height: 20px;
		border-radius: 1px;
		width: 150rpx;
	}

	.bg-purple {
		background: #fff;
		border-radius: 0 5px 0 5px;
		font-size: 10px;
		border: 1px #99a9bf solid;
		text-align: right;
		padding-right: 5px;
		padding-top: 10px;
	}

	.zr_1 {
		height: 50px;
		width: 140rpx;
		border-radius: 5px 5px 5px 5px;
		background-color: #e6e6e6;
		font-size: 24rpx;
		text-align: center;
		color: #6699ff;
	}

	.zr_2 {
		height: 50px;
		width: 140rpx;
		border-radius: 5px 5px 5px 5px;
		background-color: #e6e6e6;
		font-size: 24rpx;
		text-align: center;
		color: #6699ff;
	}

	.zr_3 {
		height: 35px;
		width: 290rpx;
		border-radius: 5px 5px 5px 5px;
		background-color: #e6e6e6;
		font-size: 15px;
		color: #6699ff;
	}

	.icon {
		width: 25px;
		height: 23px;
		padding-top: 5px;
	}

	.icon1 {
		width: 25px;
		height: 25px;
		padding-top: 8px;
		padding-left: 10px;
	}

	.img {
		width: 45rpx;
		height: 45rpx;
		padding-left: 10rpx;
		margin-top: -13rpx;
		float: left;
	}

	.js {
		background-color: rgba(133, 133, 133, .0);
		border-radius: 25rpx;
		z-index: 1;
		width: 150rpx;
		height: 150rpx;
		position: fixed;
		top: 150rpx;
		right: 0;
	}

	.imag {
		width: 45rpx;
		height: 45rpx;
		margin: 18rpx 0 0 -30rpx;
	}

	.zr {
		width: 300rpx;
		height: 230rpx;
		// background-color: aqua;
		float: right;
	}

	.zf1 {
		float: left;
		padding-top: 15rpx;
		padding-left: 20rpx;
		height: auto;
		width: 400rpx;

	}

	.sb {
		vertical-align: text-top;
		font-size: 8px;
		color: grey;
	}

	.sb1 {
		vertical-align: text-top;
		font-size: 12rpx;
	}

	.hx1 {
		float: left;
		font-size: 20px;
		padding-left: 10px;
		font-weight: bold;
	}

	.hx2 {
		float: right;
		font-size: 10px;
		color: grey;
		padding-top: 10px;

	}

	.hx3 {
		height: 95px;
		width: 95px;
		font-size: 8px;
		text-align: center;
		// border: 2px #99a9bf solid;	
	}

	.wz1 {
		height: 50rpx;
		width: 130rpx;
		background-color: #6699ff;
		margin-right: 5px;
		color: aliceblue;
		padding-left: 5px;
		z-index: 1;
		position: absolute;
		margin-left: 600rpx;
	}

	.wz2 {
		height: 50rpx;
		width: 500rpx;
		float: left;
		font-size: 30rpx;
		margin: 3px 0px 5px 0px;
		color: #999999;
		padding-left: 10px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;

	}

	.fk1 {
		width: 240rpx;
		height: 150rpx;
		float: left;
		padding-left: 20rpx;
	}

	.fk2 {
		width: 460rpx;
		height: 150rpx;
		float: right;
		padding-right: 20rpx;
	}

	.test {
		font-size: 20rpx;
		text-indent: 2em; //首行缩进
		color: grey;
		line-height: 30rpx;
		padding: 0 20rpx 0 20rpx;
	}

	.logo {
		width: 100rpx;
		height: 50rpx;
		padding-left: 45%;
		padding-top: 30rpx;
	}

	.fg {
		padding-top: 5rpx;
	}

	button {
		width: 150rpx;
		height: 60rpx;
		font-size: 20rpx;
		background-color: #6699ff;

	}

	.dz {
		background-color: rgba(0, 0, 0, .3);
		border-radius: 25rpx;
		z-index: 1;
		width: 80rpx;
		height: 80rpx;
		position: fixed;
		bottom: 300rpx;
		right: 0;
	}

	.fx {
		background-color: rgba(0, 0, 0, .3);
		border-radius: 25rpx;
		z-index: 1;
		width: 80rpx;
		height: 80rpx;
		position: fixed;
		bottom: 190rpx;
		right: 0;
		margin-top: 5rpx;


	}

	.dd {
		background-color: #fff;
		z-index: 1;
		width: 750rpx;
		height: 110rpx;
		position: fixed;
		bottom: 0;
		border-top: 1px solid #999999;
		display: flex;
	}

	.dd1 {
		flex: 1;
		height: 70rpx;
		width: 180rpx;
		margin: 10rpx 10rpx 0 10rpx;

	}

	.l {
		width: 350rpx;
		height: 230rpx;
		float: left;
		margin-left: 20rpx;
		margin-top: 20rpx;
	}

	.img1 {
		width: 350rpx;
		height: 200rpx;
		margin-top: 20rpx;
		z-index: -1;
		position: absolute;
	}

	.img2 {
		width: 300rpx;
		height: 150rpx;
		border-radius: 15rpx;
		z-index: -1;
		position: absolute;
	}

	.img3 {
		width: 400rpx;
		height: 150rpx;
		border-radius: 15rpx;
		z-index: -1;
		position: absolute;
	}

	.p1 {
		color: #fff;
		text-align: center;
		margin-top: 50rpx
	}

	.p2 {
		color: #fff;
		margin: 50rpx;
		text-align: center;
	}

	.p3 {
		height: 200rpx;
		font-size: 24rpx;

	}

	.p4 {
		padding-top: 180rpx;
		font-size: 30rpx;
		color: #fff;
	}

	.cs {
		height: 150rpx;
		width: 300rpx;
		margin-left: 15rpx;
		float: left;
	}

	.xq {
		height: 150rpx;
		width: 400rpx;
		margin-right: 15rpx;
		float: right;
	}

	.button {
		background-color: rgba(255, 255, 255, .0);
		border-style: none;
		height: 77rpx;
		margin-top: -28rpx;
		width: 165rpx;
		border-radius: 0 5px 0 5px;
		float: left;
	}

	.pp {
		// margin-left: 60rpx;
		background-color: #6699ff;
		float: right;
		font-size: 25rpx;
		width: 150rpx;
		z-index: 0;
		position: relative;
		height: 15rpx;
	}

	.u-page {
		padding: 0;
	}

	.u-cell-icon {
		width: 36rpx;
		height: 36rpx;
		margin-right: 8rpx;
	}

	.u-cell-group__title__text {
		font-weight: bold;
	}
</style>
